<template>
  <div class="tabs">
    <!-- title -->
    <van-nav-bar title="订单列表" />
    <!-- tabs -->
    <van-tabs v-model:active="activeName">
      <van-tab
        v-for="item of arr"
        :key="item.name"
        :title="item.title"
        :name="item.name"
        :to="item.path"
      >
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onUnmounted, onMounted,onActivated,onDeactivated } from "vue";
// 引入hooks
import { useOrderTabs } from "@/hooks/order/useOrder.js";
import { useRoute } from "vue-router";
const route = reactive(useRoute());
const props = defineProps(["arr", "activeName"]);
const activeName = ref("a");
console.log("created",activeName.value);
onMounted(()=>{
  console.log('Mounted',activeName.value);
  activeName.value=localStorage.getItem('activeName')
})
onActivated(()=>{
  console.log('Activate',activeName.value);
  activeName.value=localStorage.getItem('activeName')
  console.log('Activated',activeName.value);
 
})
onDeactivated(()=>{
})
// 监听路由
watch(
  route,
  (n, o) => {
    console.log('changeRouterPath',activeName.value);
    let Path = n.path.slice(7);
    // console.log(Path);
    switch (Path) {
      case "all":
        localStorage.setItem("activeName", "a");
        break;
      case "not":
        localStorage.setItem("activeName", "b");
        break;
      case "now":
        localStorage.setItem("activeName", "c");
        break;
      default:
        break;
    }
  },
  {
    immediate: true,
  }
);
const { changeTabs } = useOrderTabs();

onUnmounted(() => {
  console.log("tab公共组件销毁了");
});
</script>

<style lang="scss" scoped>
.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
}
</style>